<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1 class="page-header">电影：{{details.title}} 详细信息</h1>

<div class="row placeholders">
  <div class="col-lg-4 tc">
    <img class="img-circle" src="{{details.images.large}}" alt="{{details.title}}" style="width: 140px; height: 140px;">
    <h2>{{details.title}}</h2>
    <p>{{details.summary}}</p>
  </div>
</div>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">导演/主演/编剧</h3>
  </div>
  <div class="panel-body">
    导演：<span ng-repeat="d in details.directors">{{d.name}}&nbsp;</span>&nbsp;&nbsp;
    主演：<span ng-repeat="c in details.casts">{{c.name}}&nbsp;</span>&nbsp;&nbsp;
  </div>
</div>
<div class="panel panel-warning">
  <div class="panel-heading">
    <h3 class="panel-title">评分</h3>
  </div>
  <div class="panel-body">
    最高分：{{details.rating.max}}&nbsp;&nbsp;&nbsp;&nbsp;最低分：{{details.rating.min}}&nbsp;&nbsp;&nbsp;&nbsp;平均分：{{details.rating.average}}&nbsp;&nbsp;&nbsp;&nbsp;评星数:{{details.rating.stars}}
  </div>
</div>
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">参考他人</h3>
  </div>
  <div class="panel-body">
    想看人数：{{details.wish_count}}&nbsp;&nbsp;&nbsp;&nbsp;看过人数：{{details.collect_count}}
  </div>
</div>
<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">上映日期</h3>
  </div>
  <div class="panel-body">
    上映日期：{{details.pubdates||'未知'}}； 大陆上映日期：{{details.mainland_pubdate||'未知'}}；
  </div>
</div>
<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">其它信息</h3>
  </div>
  <div class="panel-body">
    <span ng-show="details.year">年代：{{details.year}}&nbsp;&nbsp;</span>
    <span ng-show="details.languages">语言：{{details.languages}}&nbsp;&nbsp;</span>
    <span ng-show="details.durations">片长：{{details.durations}}&nbsp;&nbsp;</span>
    <span ng-show="details.countries">制片国家/地区：<span
      ng-repeat="c in details.countries">{{c}}&nbsp;</span>&nbsp;&nbsp;</span>
    <span ng-show="details.comments_count">短评数量：{{details.comments_count}}&nbsp;&nbsp;</span>
    <span ng-show="details.reviews_count">影评数量：{{details.reviews_count}}</span>
  </div>
</div>

<!--loading效果-->
<div class="loading" ng-show="loading">
  <div class="spinner">
    <div class="spinner-container container1">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
    </div>
  </div>
</div>
</body>
</html>
